<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui-v2.5.7/layui-v2.5.7/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<form class="layui-form" id="myform" lay-filter="myform" style="margin-top: 10px;" >
    <div class="layui-form-item" style="display: flex;align-items: center;width: 300px">
        <div class="layui-input-block" style="margin-left: 10px;flex: 2;">
            <input type="text" name="name" id="search" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
        </div>
        <button class="layui-btn layui-btn-normal" type="button" style="flex: 1;" id="searchBtn">查询</button>
    </div>
</form>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo" lay-filter="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="../js/jquery.min.js"></script>
<script src="../layui-v2.5.7/layui-v2.5.7/layui/layui.all.js" charset="utf-8"></script>
<script>
    layui.use(['table','util','layer'], function(){
        var table = layui.table;
        var util = layui.util;
        var layer = layui.layer;
        var tableIns = table.render({
            elem: '#test'
            ,url:'https://www.iloveyxr.top:8081/user/all'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,toolbar: "#toolbarDemo"
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            title: '提示'
            ,layEvent: 'LAYTABLE_TIPS'
            ,icon: 'layui-icon-tips'
            }]
            ,parseData: function (res){
                var result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                }
                else {
                    result = res.data.slice(0, this.limit);
                }
                return{
                    "code": 0,
                    "msg": res.message,
                    "count": res.l,
                    "data": result,
                }
            }
            ,cols: [[
                {type:"checkbox"}
                ,{field:'id', width:80, title: 'ID', sort: true}
                ,{field:'name', width:100, edit: 'name',title: '用户名'}
                ,{field:'number', width:150, edit: 'number',title: '学号', sort: true}
                ,{field:'gender', width:80, edit: 'gender',title: '性别'}
                ,{field:'class', title: '组别', edit: 'class',width: 80,} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'college', title: '学院', edit: 'college',width:150, minWidth:"100"}
                ,{field:'major', title: '专业', edit: 'major',width:150, minWidth:"100"}
                ,{field:'phone', title: '电话',edit: 'phone',width: 150}
                ,{field:'qq', width:137, edit: 'qq',title: 'qq', }
                ,{field:'score', edit: 'score',title: '分数'}
                ,{field:'status', edit: 'status',title: '状态'}
            ]]
            ,loading: true
            ,page: true
            ,limits: [10,15,20,120]
            ,limit: 10
            ,id: "testReload"
            ,escape: true
        });
        table.on('edit(test)',function(obj){
            var value = obj.value
            ,data = obj.data
            ,field = obj.field;
            console.log("value = ",value);
            console.log(data);
            console.log("field = ",field);
            $.ajax({
                type: "PUT",
                url: "https://www.iloveyxr.top:8081/user",
                dataType: "json",
                data: JSON.stringify(data),
                headers:
                    {
                        'Authorization': localStorage.getItem("token"),
                        'Content-Type':'application/json;charset=utf8'
                    },
                success: res => {
                    console.log(res);
                    layer.open({
                        title: '消息'
                        ,content: '修改成功'
                    });     
                },
                error: function(XMLHttpRequest){
                    console.log(XMLHttpRequest.body);
                }
            });
        })
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    console.log(data);
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });
        document.getElementById("searchBtn").onclick = function(){
            var val = $("#search").val();
            console.log(val);
            tableIns.reload({
                url:"https://www.iloveyxr.top:8081/user/name",
                page:{
                  curr: 1
                },
                where:{
                    name: val,
                }
            })
        }
    });
</script>

</body>
</html>